<template>
    <div class="condition">
        <el-form label-width="auto" style="max-width: 700px" :rules="rules" ref="ruleFormRef" :model="ruleForm">
            <el-form-item label="出发城市" prop="departureCity">
                <el-input v-model="ruleForm.departureCity" />
            </el-form-item>
            <el-form-item label="目的城市" prop="destination">
                <el-input v-model="ruleForm.destination" />
            </el-form-item>
            <el-form-item label="旅行日期" prop="selectedDate">
            <el-col :span="11">
                <el-date-picker
                v-model="ruleForm.selectedDate"
                type="date"
                style="width: 100%"
                :disabled-date="disabledDate"
                />
            </el-col>
            </el-form-item>

            <el-form-item label="出行人数" prop="peopleNum">
                <el-input v-model.number="ruleForm.peopleNum" />
            </el-form-item>
            <!-- <el-form-item label="航天公司">
                <el-radio-group v-model="ruleForm.airlineCompany">
                    <el-radio value="四川航空公司">四川航空公司</el-radio>
                    <el-radio value="中国国际航空公司">中国国际航空公司</el-radio>
                    <el-radio value="中国南方航空公司">中国南方航空公司</el-radio>
                    <el-radio value="海南航空公司">海南航空公司</el-radio>
                    <el-radio value="中国东方航空公司">中国东方航空公司</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="机场">
                <el-input v-model="ruleForm.airport" />
            </el-form-item> -->
        </el-form>
        <el-button type="primary" @click="searchTickets(ruleFormRef)" style="background-color: #0086f6 !important; color: white !important;">查询</el-button>
    </div>
</template>

<script setup lang="ts" name="Condition">
import type { FormInstance,FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import {ref,reactive} from 'vue';
import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router';
const route=useRoute();
//数据
class Order{
    airlineCompany:string="";//航天公司
    airport:string="";//机场
    departureCity:string="";//出发城市
    destination:string="";//目的城市
    selectedDate:string="";//旅行日期
    peopleNum:number=1;//出行人数
    
    constructor(airlineCompany:string,airport:string,departureCity:string,destination:string,selectedDate:string,peopleNum:number){
        this.airlineCompany=airlineCompany;
        this.airport=airport;
        this.departureCity=departureCity;
        this.destination=destination;
        this.selectedDate=selectedDate;
        this.peopleNum=peopleNum;
    }
}
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    airlineCompany:string;//航天公司
    airport:string;//机场
    selectedDate:string;//旅行日期
    departureCity:string;//出发城市
    destination:string;//目的城市
    peopleNum:number;//出行人数
}
const ruleForm = reactive<RuleForm>({
    airlineCompany:"",
    airport:"",
    selectedDate:"",
    departureCity:"",
    destination:"",
    peopleNum:1
})
const currentDate:Date = new Date();
const year: number = currentDate.getFullYear();  
const month: number = currentDate.getMonth() +1; 
const day: number = currentDate.getDate();  
ruleForm.selectedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`; 

const router = useRouter();
//方法
// 限制可选日期的函数  
const disabledDate = (date) => {  
    const today = new Date();//当前日期  
    const startDate = new Date('2024-11-30');//创建一个新的日期对象  
    const endDate = new Date('2024-12-30'); 
    // startDate.setDate(today.getDate() - 1);//当前日期的前1天
    // endDate.setDate(today.getDate() + 29);//当前日期之后的29天  
    // 禁用今天之前的日期  
    return date.getTime() < startDate.getTime() || date.getTime() > endDate.getTime();  
}; 
const rules = reactive<FormRules<RuleForm>>({
    departureCity: [
    {
        required: true,
        message: '出发城市不能为空',
        trigger: 'blur',
    }],
    destination: [
    {
        required: true,
        message: '目的城市不能为空',
        trigger: 'blur',
    }],
    selectedDate: [
    {
        required: true,
        message: '旅行日期不能为空',
        trigger: 'blur',
    }],
    peopleNum: [
    {
        type:'number',
        min:1,
        required: true,
        message: '出行人数应为正整数',
        trigger: 'blur',
    }]
})
function searchTickets(form:FormInstance|undefined){
    if(!form) return;
    form.validate((valid, fields) => {  
        if (valid) { 
            const date = new Date(ruleForm.selectedDate);  
            ruleForm.selectedDate = date.toLocaleDateString('en-CA');
            const order =new Order(ruleForm.airlineCompany,ruleForm.airport,ruleForm.departureCity,ruleForm.destination,ruleForm.selectedDate,ruleForm.peopleNum);
            // console.log(order);
            router.push({
                name:'select',
                query:{
                    order:JSON.stringify(order),
                    account:route.query.account
                }
            });
        }  
    });  
}
</script>

<style></style>